<template>
	<div class="home">
		<div class="home-top">
			<!-- <img src="../../../static/images/agent-logo.png" alt="" class="left-icon"> -->
            <div class="header-left bold">DL客户系统</div>
			<div class="right-notice" @click="toNotice">
				<img src="../../../static/images/agent-home-notice.png" alt="" class="right-notice-icon">
				<span class="right-notice-point" v-if="hasNotice"></span>
			</div>
		</div>
		<div class="card-show">
			<div class="card-show-title">
				<span>预计佣金</span>
				<img src="../../../static/images/agent-home-title-icon.png" alt="" class="card-show-title-icon" @click="clickShowPopover">
				<div class="popover-fonts" v-if="showPopover">预计佣金只作为参考，不作为本月结算依据，实际佣金以下月10日结算为准，预计佣金=下级会员佣金+下级代理佣金； 下级会员佣金=公司净盈利x预计佣金比例(上月佣金)</div>
			</div>
			<div class="card-show-balance">
				<span style="font-size: .2rem">¥</span>
				<span v-if="!commissionDataLoading">{{balance}}</span>
                <van-loading v-if="commissionDataLoading" color="#FFFFFF" size=".26rem"/>
			</div>
			<div class="card-show-info-line">
				<div class="card-show-info-line-part flex">上月实际发放:
                    <span v-if="!commissionDataLoading">{{lastMonthMoney}}</span>
                    <van-loading v-if="commissionDataLoading" color="#FFFFFF" size=".26rem" style="display: inline-block;"/>
                    元
                </div>
				<div class="card-show-info-line-part">
					<span>佣金比例 </span>
                    <span v-if="!commissionDataLoading">{{commissionPercent}}</span>
                    <van-loading v-if="commissionDataLoading" color="#FFFFFF" size=".26rem" style="display: inline-block;"/>
                    %
					<img src="../../../static/images/agent-home-title-icon.png" alt="" class="card-show-info-icon"@click="clickShowPopover2">
					<div class="popover-fonts2" v-if="showPopover2">注：当公司净盈利为负数时候（会员盈利）或未到达方法标准时，实际发放金额为0元</div>
				</div>
			</div>
			<div class="card-show-info-line">
				<div class="card-show-info-line-part">
                    <span>剩余</span> 
                    <span v-if="!commissionDataLoading">{{remainDay}}</span>
                    <van-loading v-if="commissionDataLoading" color="#FFFFFF" size=".26rem" style="display: inline-block;"/>
                    天
                </div>
				<div class="card-show-info-line-part">本期佣金统计截止 {{validDate}}</div>
			</div>
			<van-progress class="progress-content" :percentage="progressPercent" stroke-width="10"  color="#FF9D00" pivot-color="#DEB190" track-color="#FFFFFF" :showPivot="false"/>
			<div class="mask-white" v-if="showWhiteMask" @click="cancerPopover"></div>
		</div>
		<div class="gray-area"></div>
		<div class="new-members">
			<div class="new-members-title flex-b">
                <div class="new-members-title-left flex-s">
                    <div class="new-members-title-list" :class="chosingTitle===1?'chosing-title':''" @click="switchMembersTitle(1)">最新存款会员</div>
                    <span>&nbsp;/&nbsp;</span>
                    <div class="new-members-title-list" :class="chosingTitle===2?'chosing-title':''" @click="switchMembersTitle(2)">首次存款会员</div>
                    <span>&nbsp;/&nbsp;</span>
                    <div class="new-members-title-list" :class="chosingTitle===3?'chosing-title':''" @click="switchMembersTitle(3)">最新加入会员</div>
                </div>
                <div class="new-members-title-right">
                    <van-icon v-if='memberPageNum === 1' name="arrow-left" class='pre-btn'/>
                    <van-icon v-if='memberPageNum !== 1' name="arrow-left" class='pre-btn pre-btn2' @click="toPreMembers()"/>
                    <van-icon v-if='!hasNext' name="arrow" class='next-btn'/>
                    <van-icon v-if='hasNext' name="arrow" class='next-btn next-btn2' @click="toNextMembers()"/>
                </div>
            </div>
			<div class="new-members-content" v-if="chosingTitle===1">
				<div class="new-members-content-title">
					<div class="new-members-content-title-list">用户名</div>
					<div class="new-members-content-title-list">金额</div>
					<div class="new-members-content-title-list">存款时间</div>
				</div>
				<div class="new-members-content-list-box">
                    <van-skeleton :row="2" row-width="[100%,100%]" :loading="newMembersDataLoading">
                        <div class="new-members-content-list" v-for="(item,index) in newMembersData">
                            <div class="">{{item.loginName}}</div>
                            <div class="">{{item.cash}}</div>
                            <div class="">{{item.time}}</div>
                        </div>
                        <div class="new-members-content-list2" v-if="newMembersData.length === 0">暂无数据</div>
                    </van-skeleton>
				</div>
			</div>
			<div class="new-members-content" v-if="chosingTitle===2">
				<div class="new-members-content-title">
					<div class="new-members-content-title-list">用户名</div>
					<div class="new-members-content-title-list">金额</div>
					<div class="new-members-content-title-list">存款时间</div>
				</div>
				<div class="new-members-content-list-box">
                    <van-skeleton :row="2" row-width="[100%,100%]" :loading="newMembersDataLoading">
                        <div class="new-members-content-list" v-for="(item,index) in newMembersData">
                            <div class="">{{item.loginName}}</div>
                            <div class="">{{item.cash}}</div>
                            <div class="">{{item.time}}</div>
                        </div>
                        <div class="new-members-content-list2" v-if="newMembersData.length === 0">暂无数据</div>
                    </van-skeleton>
				</div>
			</div>
			<div class="new-members-content" v-if="chosingTitle===3">
				<div class="new-members-content-title">
					<div class="new-members-content-title-list new-members-content-title-list2">用户名</div>
					<div class="new-members-content-title-list new-members-content-title-list2">会员名</div>
				</div>
				<div class="new-members-content-list-box">
                    <van-skeleton :row="2" row-width="[100%,100%]" :loading="newMembersDataLoading">
                        <div class="new-members-content-list new-members-content-list3" v-for="(item,index) in newMembersData">
                            <div class="">{{item.loginName}}</div>
                            <div class="">{{item.time}}</div>
                        </div>
                        <div class="new-members-content-list2" v-if="newMembersData.length === 0">暂无数据</div>
                    </van-skeleton>
				</div>
			</div>
			<div class="new-members-remind">
				<img src="../../../static/images/agent-home-remind.png" alt="" class="new-members-remind-icon">
				<span>系统定时每天下午3点前更新一次当月代理佣金数据</span>
			</div>
		</div>
		<div class="gray-area"></div>
		<div class="commission-content">
			<div class="commission-content-title">
				<div class="commission-content-title-text">佣金概况</div>
				<div class="commission-content-title-switch">
					<div class="commission-content-title-switch-list" :class="commissionDate===1?'commission-date-chosing':''" @click="switchCommissionDate(1)">本月</div>
					<div class="commission-content-title-switch-list" :class="commissionDate===2?'commission-date-chosing':''" @click="switchCommissionDate(2)">上月</div>
				</div>
			</div>
			<div class="commission-content-show">
				<div class="commission-content-show-list">
                    <van-skeleton :row="2" row-width="[100%,100%]" :loading="commissionDataLoading">
                        <div class="commission-content-show-list-part commission-content-show-list-part1">
                            <div class="line1">红利</div>
                            <div class="nomarl" v-if="commissionBonus === 0">{{commissionBonus}}</div>
                            <div class="red" v-if="commissionBonus > 0">{{commissionBonus}}</div>
                            <div class="green" v-if="commissionBonus < 0">{{commissionBonus}}</div>
                        </div>
                    </van-skeleton>
                    <van-skeleton :row="2" row-width="[100%,100%]" :loading="commissionDataLoading">
                        <div class="commission-content-show-list-part commission-content-show-list-part1">
                            <div class="line1">返水</div>
                            <div class="nomarl" v-if="commissionRebate === 0">{{commissionRebate}}</div>
                            <div class="red" v-if="commissionRebate > 0">{{commissionRebate}}</div>
                            <div class="green" v-if="commissionRebate < 0">{{commissionRebate}}</div>
                        </div>
                    </van-skeleton>
				</div>
				<div class="commission-content-show-list">
                    <van-skeleton :row="2" row-width="[100%,100%]" :loading="commissionDataLoading">
                        <div class="commission-content-show-list-part commission-content-show-list-part2">
                            <div class="line1">体育平台费</div>
                            <div class="nomarl" v-if="commissionSportFee === 0">{{commissionSportFee}}</div>
                            <div class="red" v-if="commissionSportFee > 0">{{commissionSportFee}}</div>
                            <div class="green" v-if="commissionSportFee < 0">{{commissionSportFee}}</div>
                        </div>
                    </van-skeleton>
                    <van-skeleton :row="2" row-width="[100%,100%]" :loading="commissionDataLoading">
                        <div class="commission-content-show-list-part commission-content-show-list-part2">
                            <div class="line1">老虎机平台费</div>
                            <div class="nomarl" v-if="commissionSlotFee === 0">{{commissionSlotFee}}</div>
                            <div class="red" v-if="commissionSlotFee > 0">{{commissionSlotFee}}</div>
                            <div class="green" v-if="commissionSlotFee < 0">{{commissionSlotFee}}</div>
                        </div>
                    </van-skeleton>
                    <van-skeleton :row="2" row-width="[100%,100%]" :loading="commissionDataLoading">
                        <div class="commission-content-show-list-part commission-content-show-list-part2">
                            <div class="line1">彩票平台费</div>
                            <div class="nomarl" v-if="commissionLotteryFee === 0">{{commissionLotteryFee}}</div>
                            <div class="red" v-if="commissionLotteryFee > 0">{{commissionLotteryFee}}</div>
                            <div class="green" v-if="commissionLotteryFee < 0">{{commissionLotteryFee}}</div>
                        </div>
                    </van-skeleton>
				</div>
				<div class="commission-content-show-list">
                    <van-skeleton :row="2" row-width="[100%,100%]" :loading="commissionDataLoading">
                        <div class="commission-content-show-list-part commission-content-show-list-part2">
                            <div class="line1">棋牌平台费</div>
                            <div class="nomarl" v-if="commissionPokerFee === 0">{{commissionPokerFee}}</div>
                            <div class="red" v-if="commissionPokerFee > 0">{{commissionPokerFee}}</div>
                            <div class="green" v-if="commissionPokerFee < 0">{{commissionPokerFee}}</div>
                        </div>
                    </van-skeleton>
                    <van-skeleton :row="2" row-width="[100%,100%]" :loading="commissionDataLoading">
                        <div class="commission-content-show-list-part commission-content-show-list-part2">
                            <div class="line1">电竞平台费</div>
                            <div class="nomarl" v-if="commissionEsportFee === 0">{{commissionEsportFee}}</div>
                            <div class="red" v-if="commissionEsportFee > 0">{{commissionEsportFee}}</div>
                            <div class="green" v-if="commissionEsportFee < 0">{{commissionEsportFee}}</div>
                        </div>
                    </van-skeleton>
                    <van-skeleton :row="2" row-width="[100%,100%]" :loading="commissionDataLoading">
                        <div class="commission-content-show-list-part commission-content-show-list-part2">
                            <div class="line1">真人平台费</div>
                            <div class="nomarl" v-if="commissionLiveFee === 0">{{commissionLiveFee}}</div>
                            <div class="red" v-if="commissionLiveFee > 0">{{commissionLiveFee}}</div>
                            <div class="green" v-if="commissionLiveFee < 0">{{commissionLiveFee}}</div>
                        </div>
                    </van-skeleton>
				</div>
				<div class="commission-content-show-list">
                    <van-skeleton :row="2" row-width="[100%,100%]" :loading="commissionDataLoading">
                        <div class="commission-content-show-list-part commission-content-show-list-part1">
                            <div class="line1">公司总盈利</div>
                            <div class="nomarl" v-if="commissionTotalNetMoney === 0">{{commissionTotalNetMoney}}</div>
                            <div class="red" v-if="commissionTotalNetMoney > 0">{{commissionTotalNetMoney}}</div>
                            <div class="green" v-if="commissionTotalNetMoney < 0">{{commissionTotalNetMoney}}</div>
                        </div>
                    </van-skeleton>
                    <van-skeleton :row="2" row-width="[100%,100%]" :loading="commissionDataLoading">
                        <div class="commission-content-show-list-part commission-content-show-list-part1">
                            <div class="line1">公司净盈利</div>
                            <div class="nomarl" v-if="commissionLastML === 0">{{commissionLastML}}</div>
                            <div class="red" v-if="commissionLastML > 0">{{commissionLastML}}</div>
                            <div class="green" v-if="commissionLastML < 0">{{commissionLastML}}</div>
                        </div>
                    </van-skeleton>
<!--					<div class="commission-content-show-list-part commission-content-show-list-part2">-->
<!--						<div class="line1">上月累计</div>-->
<!--						<div class="nomarl" v-if="commissionLastCommission === 0">{{commissionLastCommission}}</div>-->
<!--						<div class="red" v-if="commissionLastCommission > 0">{{commissionLastCommission}}</div>-->
<!--						<div class="green" v-if="commissionLastCommission < 0">{{commissionLastCommission}}</div>-->
<!--					</div>-->
				</div>
			</div>
		</div>
		<div class="gray-area"></div>
		<div class="new-members cash-overview">
			<div class="cash-overview-title">
				<div class="new-members-title new-members-title2">
					<div class="new-members-title-list" :class="chosingCashTitle===1?'chosing-cash-title':''" @click="switchCashTitle(1)">资金概况</div>
					<span>&nbsp;/&nbsp;</span>
					<div class="new-members-title-list" :class="chosingCashTitle===2?'chosing-cash-title':''" @click="switchCashTitle(2)">优惠概况</div>
				</div>
				<div class="cash-overview-title-more" @click="toCashDataDetail">
					<span>更多</span>
					<img class="arrow-icon" src="../../../static/images/activeRed.gif" alt="">
				</div>
				<div class="cash-overview-switch">
					<div class="cash-overview-switch-list" :class="cashDate===1?'cash-overview-chosing':''" @click="switchCashDate(1)">本月</div>
					<div class="cash-overview-switch-list" :class="cashDate===2?'cash-overview-chosing':''" @click="switchCashDate(2)">上月</div>
				</div>
			</div>
			<div class="cash-overview-content" v-if="chosingCashTitle===1">
                <van-skeleton :row="2" row-width="" :loading="cashDataLoading">
                    <div class="cash-overview-content-list">
                        <div class="line1">总存款额</div>
                        <div class="nomarl">{{depositAmount}}</div>
                    </div>
                </van-skeleton>
                <van-skeleton :row="2" row-width="" :loading="cashDataLoading">
                    <div class="cash-overview-content-list">
                        <div class="line1">存款人数</div>
                        <div class="nomarl">{{depositCount}}</div>
                    </div>
                </van-skeleton>
                <van-skeleton :row="2" row-width="" :loading="cashDataLoading">
                    <div class="cash-overview-content-list">
                        <div class="line1">总提款额</div>
                        <div class="nomarl">{{withdrawAmount}}</div>
                    </div>
                </van-skeleton>
                <van-skeleton :row="2" row-width="" :loading="cashDataLoading">
                    <div class="cash-overview-content-list">
                        <div class="line1">提款人数</div>
                        <div class="nomarl">{{withdrawCount}}</div>
                    </div>
                </van-skeleton>
                <van-skeleton :row="2" row-width="" :loading="cashDataLoading">
                    <div class="cash-overview-content-list">
                        <div class="line1">总投注额</div>
                        <div class="nomarl">{{totalBet}}</div>
                    </div>
                </van-skeleton>
			</div>
			<div class="cash-overview-content" v-if="chosingCashTitle===2">
                <van-skeleton :row="2" row-width="" :loading="bonusDataLoading">
                    <div class="cash-overview-content-list cash-overview-content-list2">
                        <div class="line1">红利</div>
                        <div class="nomarl">{{discountBonus}}</div>
                    </div>
                </van-skeleton>
                <van-skeleton :row="2" row-width="" :loading="bonusDataLoading">
                    <div class="cash-overview-content-list cash-overview-content-list2">
                        <div class="line1">返水</div>
                        <div class="nomarl">{{discountRebate}}</div>
                    </div>
                </van-skeleton>
			</div>
		</div>
		<div class="gray-area"></div>
		<div class="new-members cash-overview">
			<div class="cash-overview-title">
				<div class="new-members-title new-members-title2">
					<div class="new-members-title-list" :class="memberDataMode===1?'chosing-cash-title':''" @click="switchMemberTitle(1)">会员概况</div>
					<span>&nbsp;/&nbsp;</span>
					<div class="new-members-title-list" :class="memberDataMode===2?'chosing-cash-title':''" @click="switchMemberTitle(2)">新注册概况</div>
				</div>
				<div class="cash-overview-title-more" @click="toMemberDataDetail">
					<span>更多</span>
					<img class="arrow-icon" src="../../../static/images/activeRed.gif" alt="">
				</div>
				<div class="cash-overview-switch">
					<div class="cash-overview-switch-list" :class="memberDate===1?'cash-overview-chosing':''" @click="switchMemberDate(1)">本月</div>
					<div class="cash-overview-switch-list" :class="memberDate===2?'cash-overview-chosing':''" @click="switchMemberDate(2)">上月</div>
				</div>
			</div>
			<div class="cash-overview-content member-overview-content" v-if="memberDataMode===1">
                <van-skeleton :row="2" row-width="" :loading="memberDataLoading">
                    <div class="cash-overview-content-list member-overview-content-list">
                        <div class="line1">累计会员数</div>
                        <div class="nomarl">{{memberCountAll}}</div>
                    </div>
                </van-skeleton>
                <van-skeleton :row="2" row-width="" :loading="memberDataLoading">
                    <div class="cash-overview-content-list member-overview-content-list">
                        <div class="line1">活跃会员数</div>
                        <div class="nomarl">{{avtivityCountAll}}</div>
                    </div>
                </van-skeleton>
                <van-skeleton :row="2" row-width="" :loading="memberDataLoading">
                    <div class="cash-overview-content-list member-overview-content-list">
                        <div class="line1">待活跃会员数</div>
                        <div class="nomarl">{{noavtivityCountAll}}</div>
                    </div>
                </van-skeleton>
                <van-skeleton :row="2" row-width="" :loading="memberDataLoading">
                    <div class="cash-overview-content-list member-overview-content-list">
                        <div class="line1">有效会员数</div>
                        <div class="nomarl">{{validCountAll}}</div>
                    </div>
                </van-skeleton>
			</div>
			<div class="cash-overview-content" v-if="memberDataMode===2">
                <van-skeleton :row="2" row-width="" :loading="newMemberOverviewLoading">
                    <div class="cash-overview-content-list member-overview-content-list">
                        <div class="line1">新注册会员数</div>
                        <div class="nomarl">{{memberCountAllNew}}</div>
                    </div>
                </van-skeleton>
                <van-skeleton :row="2" row-width="" :loading="newMemberOverviewLoading">
                    <div class="cash-overview-content-list member-overview-content-list">
                        <div class="line1">活跃会员数</div>
                        <div class="nomarl">{{avtivityCountAllNew}}</div>
                    </div>
                </van-skeleton>
                <van-skeleton :row="2" row-width="" :loading="newMemberOverviewLoading">
                    <div class="cash-overview-content-list member-overview-content-list">
                        <div class="line1">待活跃会员数</div>
                        <div class="nomarl">{{noavtivityCountAllNew}}</div>
                    </div>
                </van-skeleton>
                <van-skeleton :row="2" row-width="" :loading="newMemberOverviewLoading">
                    <div class="cash-overview-content-list member-overview-content-list">
                        <div class="line1">有效会员数</div>
                        <div class="nomarl">{{validCountAllNew}}</div>
                    </div>
                </van-skeleton>
			</div>
		</div>
		<div class="gray-area"></div>
		<div class="commission-content">
			<div class="commission-content-title">
				<div class="commission-content-title-text">游戏数据汇总</div>
				<div class="commission-content-title-switch">
					<div class="commission-content-title-switch-list" :class="gameDataDate===1?'commission-date-chosing':''" @click="switchGameDataDate(1)">本月</div>
					<div class="commission-content-title-switch-list" :class="gameDataDate===2?'commission-date-chosing':''" @click="switchGameDataDate(2)">上月</div>
				</div>
			</div>
			<div class="games-data-table" v-if="tableNoData === false">
				<div class="games-data-table-content-list" :class="gameDataOverview.length === 1?'active-games1':(gameDataOverview.length === 2?'active-games2':'')">
					<div class="games-data-table-content-list-title dark-bg">游戏名称</div>
					<div class="games-data-table-content-list-title">玩家输赢</div>
					<div class="games-data-table-content-list-title">有效投注额</div>
				</div>
				<div class="games-data-table-content" id="gamesDataContent" :class="gameDataOverview.length === 1?'active-games1':(gameDataOverview.length === 2?'active-games3':'')">
					<div class="games-data-table-content-list" v-for="(item,index) in gameDataOverview" :key="index">
						<div class="games-data-table-content-list-show" :class="gameDataOverview.length === 1?'active-games1-list':(gameDataOverview.length === 2?'active-games2-list':'')">{{item.gameName}}</div>
						<div class="games-data-table-content-list-show light-bg" :class="gameDataOverview.length === 1?'active-games1-list':(gameDataOverview.length === 2?'active-games2-list':'')">{{item.netAmount}}</div>
						<div class="games-data-table-content-list-show light-bg" :class="gameDataOverview.length === 1?'active-games1-list':(gameDataOverview.length === 2?'active-games2-list':'')">{{item.validAmount}}</div>
					</div>
				</div>
			</div>
			<div class="games-data-table" v-if="tableNoData === true">
				<div class="games-data-table-content-list list-no-data">
					<div class="games-data-table-content-list-title title-no-data">暂无数据</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import $ from 'jquery'
export default {
	name: 'agentHome',
	components: {
		$,
	},
	data() {
		return {
            newMemberOverviewLoading:true,
            memberDataLoading:true,
            bonusDataLoading:true,
            cashDataLoading:true,
            commissionDataLoading:true,
            newMembersDataLoading:true,
			newMembersData:[],
			hasNotice:true,
			balance:'',
			lastMonthMoney:'',
			commissionPercent:'',
			remainDay:'',
			validDate:'',
			progressPercent:'',
			chosingTitle:1,
			commissionDate:1,
			commissinData:[],
			chosingCashTitle:1,
			cashDate:1,
			memberDate:1,
			gameDataDate:1,
			demoGamesList:[],
			gameDataOverview:[],
			cashDataMode:1,
			memberDataMode:1,
			cashMonthType:1,
			memberMonthType:1,
			commissionBonus:'',
			commissionRebate:'',
			commissionSportFee:'',
			commissionSlotFee:'',
			commissionLotteryFee:'',
			commissionPokerFee:'',
			commissionEsportFee:'',
			commissionLiveFee:'',
			commissionTotalNetMoney:'',
			commissionLastML:'',
			commissionLastCommission:'',
			moneyDetailData:[],
			depositAmount:'',
			depositCount:'',
			withdrawAmount:'',
			withdrawCount:'',
			totalBet:'',
			disountData:{},
			discountBonus:'',
			discountRebate:'',
			memberData:{},
			memberCountAll:'',
			avtivityCountAll:'',
			noavtivityCountAll:'',
			validCountAll:'',
			regData:[],
			memberCountAllNew:'',
			avtivityCountAllNew:'',
			noavtivityCountAllNew:'',
			validCountAllNew:'',
			gameDataSumMonthType:'current',
			tableNoData:false,
			showPopover:false,
			showPopover2:false,
			showWhiteMask:false,
            hasNext:false,
            memberPageNum:1,
		}
	},
	mounted() {
		this.getRemainDay()
		this.getDataSummary()
		this.getExpectedCommission()
		this.getCommissionDeatil()
		this.getQueryNewDeposit()
		this.getMoneyDetail()
		this.getMemberOverview()
		this.setIsLogin(true)
	},
	beforeRouteLeave (to, from, next) {    
		this.$destroy(true)
		next()
	},
	created() {
	    this.handleLoginMark()
	},
	beforeCreate() {
		//为了控制页面缓存，每一个页面创建时需要调用
		this.$store.dispatch('pushKeepAlive', 'agentHome.vue');
	},
	
	methods: {
        handleLoginMark(){
            if(sessionStorage.getItem('loginMark') === '1'){
                sessionStorage.setItem('loginMark','0')
                location.reload()
            }
        },
		clickShowPopover(){
			this.showPopover = true
			this.showWhiteMask = true
		},
		clickShowPopover2(){
			this.showPopover2 = true
			this.showWhiteMask = true
		},
		cancerPopover(){
			this.showPopover = false
			this.showPopover2 = false
			this.showWhiteMask = false
		},
		//游戏数据汇总
		getDataSummary(){
			let param = {
				month:this.gameDataSumMonthType
			}
			this.ServerAPI.postAPI(this.API.gameDataSummary,param,(success,data)=>{
				if (success){
					if(data.code === '0000'){
						this.gameDataOverview = data.data
						if(this.gameDataOverview.length === 0){
							this.tableNoData = true
						}else{
							this.tableNoData = false
						}
					}
				}
			})
		},
        // 会员状态数据翻页
        toNextMembers(){
            this.memberPageNum ++
            if(this.chosingTitle === 1){
                this.getQueryNewDeposit()
            }else if(this.chosingTitle === 2){
                this.getQueryFirstDeposit() 
            }else if(this.chosingTitle === 3){
                this.getQueryNewJoinCusomer()
            }
        },
        toPreMembers(){
            this.memberPageNum --
            if(this.chosingTitle === 1){
                this.getQueryNewDeposit()
            }else if(this.chosingTitle === 2){
                this.getQueryFirstDeposit() 
            }else if(this.chosingTitle === 3){
                this.getQueryNewJoinCusomer()
            }
        },
		//获取剩余天数和佣金截止时间
		getRemainDay(){
			this.ServerAPI.postAPI(this.API.remainDay,'',(success,data)=>{
				if (success){
					if(data.code === '0000'){
						this.remainDay = data.data.remainDay;
						this.validDate = data.data.maxDay;
						this.progressPercent = data.data.remainStr.replace(/%/,'')
					}
				}
			})
		},
		//预计佣金
		getExpectedCommission(){
			this.ServerAPI.postAPI(this.API.queryExpectedCommission,'',(success,data)=>{
				if (success){
					if(data.code === '0000'){
						this.lastMonthMoney = data.data.lastCommission
						this.commissionPercent = data.data.rate
						// this.balance = data.data.commission
					}
				}
			})
		},
		// 获取佣金概况
		getCommissionDeatil(){
            this.commissionDataLoading = true
			this.ServerAPI.postAPI(this.API.commissionDeatil,'',(success,data)=>{
                this.commissionDataLoading = false
				if (success){
					if(data.code === '0000'){
						this.commissinData = data.data
						this.balance = data.data.currentMonthDate.exCommssion
						this.switchCommissionDate(1)
					}
				}
			})
		},
		// 资金概况
		getMoneyDetail(){
            this.cashDataLoading = true
			this.ServerAPI.postAPI(this.API.moeneyDeatil,'',(success,data)=>{
                this.cashDataLoading = false
				if (success){
					if(data.code === '0000'){
						this.moneyDetailData = data.data
						this.switchCashDate(1)
					}
				}
			})
		},
		// 优惠概况
		getDiscountOverview(){
            this.bonusDataLoading = true
			this.ServerAPI.postAPI(this.API.moeneyUpDeatil,'',(success,data)=>{
                this.bonusDataLoading = false
				if (success){
					if(data.code === '0000'){
						this.disountData = data.data
						this.switchCashDate(1)
					}
				}
			})
		},
		// 会员概况
		getMemberOverview(){
            this.memberDataLoading = true
			this.ServerAPI.postAPI(this.API.customerDeatil,'',(success,data)=>{
                this.memberDataLoading = false
				if (success){
					if(data.code === '0000'){
						this.memberData = data.data
						this.switchMemberDate(1)
					}
				}
			})
		},
		// 新注册概况
		getRegOverview(){
            this.newMemberOverviewLoading = true
			this.ServerAPI.postAPI(this.API.customerRegDeatil,'',(success,data)=>{
                this.newMemberOverviewLoading = false
				if (success){
					if(data.code === '0000'){
						this.regData = data.data
						this.switchMemberDate(1)
					}
				}
			})
		},
		// 游戏输赢用户统计
		getGamecount(){
			let params = {
				pageNumber:1,
				pageSize:10,
			}
			this.ServerAPI.postAPI(this.API.gamecount,params,(success,data)=>{
				if (success){
					if(data.code === '0000'){
					
					}
				}
			})
		},
		// 获取最新存款的会员
		getQueryNewDeposit(){
            this.hasNext = false
            this.newMembersDataLoading = true
			let params = {
				pageNumber:this.memberPageNum,
				pageSize:5,
			}
			this.ServerAPI.postAPI(this.API.queryNewDeposit,params,(success,data)=>{
                this.newMembersDataLoading = false
				if (success){
					if(data.code === '0000'){
						this.newMembersData = data.data.dataArr
                        if(data.data.totalPage > 0 && this.memberPageNum !== data.data.totalPage){
                            this.hasNext = true
                        }
					}
				}
			})
		},
		// 获取首次存款的会员
		getQueryFirstDeposit(){
            this.hasNext = false
            this.newMembersDataLoading = true
			let params = {
				pageNumber:this.memberPageNum,
				pageSize:5,
			}
			this.ServerAPI.postAPI(this.API.queryFirstDeposit,params,(success,data)=>{
                this.newMembersDataLoading = false
				if (success){
					if(data.code === '0000'){
						this.newMembersData = data.data.dataArr
                        if(data.data.totalPage > 0 && this.memberPageNum !== data.data.totalPage){
                            this.hasNext = true
                        }
					}
				}
			})
		},
		// 获取最新加入的会员
		getQueryNewJoinCusomer(){
            this.hasNext = false
            this.newMembersDataLoading = true
			let params = {
				pageNumber:this.memberPageNum,
				pageSize:5,
			}
			this.ServerAPI.postAPI(this.API.queryNewJoinCusomer,params,(success,data)=>{
                this.newMembersDataLoading = false
				if (success){
					if(data.code === '0000'){
						this.newMembersData = data.data.dataArr
                        if(data.data.totalPage > 0 && this.memberPageNum !== data.data.totalPage){
                            this.hasNext = true
                        }
					}
				}
			})
		},
		// 最新存款会员、首次存款会员、最新加入会员的切换
		switchMembersTitle(value){
            this.memberPageNum = 1
			if(this.chosingTitle !== value){
				this.chosingTitle = value
				if(value === 1){
					this.getQueryNewDeposit()
				}else if(value === 2){
					this.getQueryFirstDeposit()
				}else if(value === 3){
					this.getQueryNewJoinCusomer()
				}
			}else{
				return
			}
			
		},
		// 佣金概况的时间段切换
		switchCommissionDate(value){
			this.commissionDate = value;
			if(this.commissionDate === 1){
				this.commissionBonus = this.commissinData.currentMonthDate.bonus
				this.commissionRebate = this.commissinData.currentMonthDate.rebate
				this.commissionSportFee = this.commissinData.currentMonthDate.sportFee
				this.commissionSlotFee = this.commissinData.currentMonthDate.slotFee
				this.commissionLotteryFee = this.commissinData.currentMonthDate.lotteryFee
				this.commissionPokerFee = this.commissinData.currentMonthDate.pokerFee
				this.commissionEsportFee = this.commissinData.currentMonthDate.esportFee
				this.commissionLiveFee = this.commissinData.currentMonthDate.liveFee
				this.commissionTotalNetMoney = this.commissinData.currentMonthDate.totalNetMoney
				this.commissionLastML = this.commissinData.currentMonthDate.curML
				this.commissionLastCommission = this.commissinData.currentMonthDate.lastCommission
			}else if(this.commissionDate === 2){
				this.commissionBonus = this.commissinData.lastMonthDate.bonus
				this.commissionRebate = this.commissinData.lastMonthDate.rebate
				this.commissionSportFee = this.commissinData.lastMonthDate.sportFee
				this.commissionSlotFee = this.commissinData.lastMonthDate.slotFee
				this.commissionLotteryFee = this.commissinData.lastMonthDate.lotteryFee
				this.commissionPokerFee = this.commissinData.lastMonthDate.pokerFee
				this.commissionEsportFee = this.commissinData.lastMonthDate.esportFee
				this.commissionLiveFee = this.commissinData.lastMonthDate.liveFee
				this.commissionTotalNetMoney = this.commissinData.lastMonthDate.totalNetMoney
				this.commissionLastML = this.commissinData.lastMonthDate.lastML
				this.commissionLastCommission = this.commissinData.currentMonthDate.lastExCommission
			}
		},
		// 资金概况与优惠概况切换
		switchCashTitle(value){
			if(this.chosingCashTitle !== value){
				this.cashDataMode = this.chosingCashTitle = value;
				if(value === 1){
					this.getMoneyDetail()
				}else if(value === 2){
					this.getDiscountOverview()
				}
			}else{
				return
			}
			
		},
		// 资金概况与优惠概况的时间段切换
		switchCashDate(value){
			this.cashMonthType = this.cashDate = value;
			if(this.cashMonthType === 1){
				this.depositAmount = this.moneyDetailData.currData.depositAmount
				this.depositCount = this.moneyDetailData.currData.depositCount
				this.withdrawAmount = this.moneyDetailData.currData.withdrawAmount
				this.withdrawCount = this.moneyDetailData.currData.withdrawCount
				this.totalBet = this.moneyDetailData.currData.totalBet
				if(Object.keys(this.disountData).length > 0){
					this.discountBonus = this.disountData.currData.bonus
					this.discountRebate = this.disountData.currData.rebate
				}
			}else if(this.cashMonthType === 2){
				this.depositAmount = this.moneyDetailData.lastData.depositAmount
				this.depositCount = this.moneyDetailData.lastData.depositCount
				this.withdrawAmount = this.moneyDetailData.lastData.withdrawAmount
				this.withdrawCount = this.moneyDetailData.lastData.withdrawCount
				this.totalBet = this.moneyDetailData.lastData.totalBet
				if(Object.keys(this.disountData).length > 0){
					this.discountBonus = this.disountData.lastData.bonus
					this.discountRebate = this.disountData.lastData.rebate
				}
			}
		},
		// 会员概括与新注册概况切换
		switchMemberTitle(value){
			if(this.memberDataMode !== value){
				this.memberDataMode = value;
				if(value === 1){
					this.getMemberOverview()
				}else if(value === 2){
					this.getRegOverview()
				}
			}else{
				return
			}
			
		},
		// 会员概括与新注册概况的时间段切换
		switchMemberDate(value){
			this.memberMonthType = this.memberDate = value;
			if(this.memberMonthType === 1){
				this.memberCountAll = this.memberData.currData.memberCount
				this.avtivityCountAll = this.memberData.currData.avtivityCount
				this.noavtivityCountAll = this.memberCountAll - this.avtivityCountAll
				this.validCountAll = this.memberData.currData.validCount
				if(Object.keys(this.regData).length > 0){
					this.memberCountAllNew = this.regData.currData.memberCount
					this.avtivityCountAllNew = this.regData.currData.avtivityCount
					this.noavtivityCountAllNew = this.memberCountAllNew - this.avtivityCountAllNew
					this.validCountAllNew = this.regData.currData.validCount
				}
			}else if(this.memberMonthType === 2){
				this.memberCountAll = this.memberData.lastData.memberCount
				this.avtivityCountAll = this.memberData.lastData.avtivityCount
				this.noavtivityCountAll = this.memberCountAll - this.avtivityCountAll
				this.validCountAll = this.memberData.lastData.validCount
				if(Object.keys(this.regData).length > 0){
					this.memberCountAllNew = this.regData.lastData.memberCount
					this.avtivityCountAllNew = this.regData.lastData.avtivityCount
					this.noavtivityCountAllNew = this.memberCountAllNew - this.avtivityCountAllNew
					this.validCountAllNew = this.regData.lastData.validCount
				}
			}
		},
		switchGameDataDate(value){
			if(this.gameDataDate !== value){
				this.gameDataDate = value
				if(value === 1){
					this.gameDataSumMonthType = 'current'
				}else if(value === 2){
					this.gameDataSumMonthType = 'last'
				}
				this.getDataSummary();
			}else{
				return
			}
			
		},
		toNotice(){
			this.$router.push('/notice')
		},
		toCashDataDetail(){
			sessionStorage.setItem('cashMonthType',this.cashMonthType)
			if(this.cashDataMode === 1){
				this.$router.push('/cashDetail')
			}else if(this.cashDataMode === 2){
				this.$router.push('/discountDetail')
			}
		},
		toMemberDataDetail(){
			sessionStorage.setItem('memberMonthType',this.memberMonthType)
			if(this.memberDataMode === 1){
				this.$router.push('/allMemberMore')
			}else if(this.memberDataMode === 2){
				this.$router.push('/newMemberMore')
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.home {
	font-family: PingFang-SC-Medium;
	padding-bottom: 1rem;
	position: relative;
	.home-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 92%;
		margin: 0.2rem auto 0;
		.left-icon {
			height: .8rem;
		}
        .header-left {
            padding: .1rem .2rem;
            color: #FFFFFF;
            background: #1B3D8E;
            border-radius: .16rem;
            font-size: .24rem;
            // margin-left: -.04rem;
        }
		.right-notice {
			position: relative;
			.right-notice-icon {
				height: .5rem;
			}
			.right-notice-point {
				position: absolute;
				right: 0;
				top: 0;
				width: .2rem;
				height: .2rem;
				background: rgb(230,0,18);
				border-radius: 50%;
			}
		}
	}
	.card-show {
		width: 92%;
		margin: .3rem auto .2rem;
		background: rgb(0,71,157);
		border-radius: .15rem;
		color: #FFFFFF;
		padding: .3rem .2rem;
		position: relative;
		.card-show-title {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: .32rem;
			position: relative;
			.card-show-title-icon {
				width: .3rem;
				margin-left: .1rem;
				// margin-top: .05rem;
			}
			.popover-fonts {
				position: absolute;
				top: .6rem;
				right: 2rem;
				background: #FFFFFF;
				color: rgba(0,0,0,.5);
				font-size: .18rem;
				border-radius: .1rem;
				width: 3.6rem;
				padding: .1rem;
				z-index: 901;
			}
			.popover-fonts:before {
				position: absolute;
				z-index: 901;
				border-left: 9px solid transparent;
				border-right: 9px solid transparent;
				border-bottom: 9px solid #FFFFFF;
				content: " ";
				display: block;
				width: 0;
				height: 0;
				top: -.11rem;
				right: .4rem;
			}
		}
		.card-show-balance {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: .4rem;
			margin-top: .1rem;
		}
		.card-show-info-line {
			font-size: .22rem;
			color: rgba(255,255,255,.8);
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: .3rem;
			.card-show-info-line-part {
				position: relative;
				.card-show-info-icon {
					height: .3rem;
					margin-top: -.05rem;
				}
				.popover-fonts2 {
					position: absolute;
					top: -.25rem;
					right: .5rem;
					background: #FFFFFF;
					color: rgba(0,0,0,.5);
					font-size: .18rem;
					border-radius: .1rem;
					width: 3rem;
					padding: .1rem;
					z-index: 901;
				}
				.popover-fonts2:before {
					position: absolute;
					z-index: 901;
					border-top: 9px solid transparent;
					border-bottom: 9px solid transparent;
					border-left: 9px solid #FFFFFF;
					content: " ";
					display: block;
					width: 0;
					height: 0;
					top: .23rem;
					right: -.15rem;
				}
			}
		}
		.progress-content {
			margin-top: .2rem;
		}
		.mask-white {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: none;
			z-index: 900;
		}
	}
	.gray-area {
		height: .25rem;
		background: rgb(238,238,238);
	}
	.new-members {
		padding: .3rem .2rem;
		.new-members-title {
			display: flex;
			align-items: center;
			font-size: .26rem;
			color: rgb(131,131,131);
			.chosing-title,
			.chosing-cash-title {
				font-size: .32rem;
				font-weight: bold;
				color: rgb(38,37,37);
			}
            .new-members-title-right {
                color: #999999;
                .pre-btn {
                    margin-right: .3rem;
                }
                .pre-btn2,
                .next-btn2
                {
                    color: #000000;
                    font-weight: bold;
                }
            }
		}
		.new-members-title2 {
			width: 3rem;
		}
		.new-members-content {
			width: 100%;
			margin: .2rem auto 0;
			border: rgb(191,191,191) 1px solid;
			border-radius: .08rem;
		
			.new-members-content-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: center;
				width: 90%;
				margin: 0 auto;
				border-bottom: rgb(238,238,238) 1px solid;
				.new-members-content-title-list {
					width: 33%;
					height: .7rem;
					line-height: .7rem;
				}
				.new-members-content-title-list2 {
					width: 50%;
				}
			}
			.new-members-content-list-box {
				overflow-y: auto;
				max-height: calc(3.5rem + 4px);
                transition: all .3s;
                .van-skeleton {
                    margin: .14rem 0;
                }
				.new-members-content-list {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 90%;
					margin: 0 auto;
					border-bottom: rgb(238,238,238) 1px solid;
					color: rgb(123,123,123);
					
					div {
						width: 33%;
						text-align: center;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						height: .7rem;
						line-height: .7rem;
					}
				}
				.new-members-content-list3 {
					div {
						width: 50%;
					}
				}
			}
			.new-members-content-list2 {
				text-align: center;
				padding: .37rem 0;
				opacity: .7;
				font-size: .24rem;
				div {
					width: 100%;
				}
			}
			.new-members-content-list:last-child {
				border-bottom: none;
			}
		}
		.new-members-remind {
			display: flex;
			align-items: center;
			color: rgb(255,120,0);
			font-size: .2rem;
			font-weight: bold;
			margin-top: .2rem;
			.new-members-remind-icon {
				height: .28rem;
				margin-right: .1rem;
			}
		}
	}
	.commission-content {
		padding: .3rem .2rem;
		.commission-content-title {
			font-size: .32rem;
			color: rgb(38,37,37);
			font-weight: bold;
			display: flex;
			justify-content: space-between;
			align-items: center;
            .commission-content-title-text {
                font-size: .32rem;
            }
			.commission-content-title-switch {
				width: 1.5rem;
				height: .4rem;
				color: rgb(0,91,202);
				border: rgb(0,91,202) 1px solid;
				border-radius: .25rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-weight: normal;
				font-size: .22rem;
				overflow: hidden;
				.commission-content-title-switch-list {
					height: .4rem;
					line-height: .4rem;
					width: 50%;
					text-align: center;
                    font-size: .2rem;
				}
				.commission-date-chosing {
					background: rgb(0,91,202);
					color: #FFFFFF;
					border-radius: .25rem;
				}
			}
		}
		.commission-content-show {
			text-align: center;
			margin-top: .2rem;
			.commission-content-show-list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: .2rem 0;
				border-top: rgb(220,220,220) 1px solid;
                width: 100%;
                .van-skeleton {
                    width: 30%;
                    margin: 0 auto;
                }
				.commission-content-show-list-part {
					width: 50%;
					border-right: rgb(220,220,220) 1px solid;
					font-weight: bold;
					.line1 {
						color: rgba(35,35,35,.7);
						margin-bottom: .1rem;
					}
					.red {
						color: rgb(236,0,0);
					}
					.green {
						color: rgb(18,196,0);
					}
					.nomarl {
						color: rgba(76,76,76,.7);
					}
				}
				.commission-content-show-list-part:last-child {
					border-right: none;
				}
				.commission-content-show-list-part1 {
					width: 50%;
				}
			}
			.commission-content-show-list:last-child {
				border-bottom: rgb(220,220,220) 1px solid;
			}
		}
		.games-data-table {
			text-align: center;
			display: flex;
			align-items: center;
			color: #FFFFFF;
			font-size: .26rem;
			margin-top: .2rem;
			width: 100%;
			.games-data-table-content-list {
				.games-data-table-content-list-title {
					width: 1.5rem;
					height: .8rem;
					line-height: .8rem;
					background: #1B3D8E;

				}
				.dark-bg {
					background: #1B3D8E;
				}
			}
			.games-data-table-content {
				display: flex;
				align-items: center;
				overflow-x: scroll;
				width: 100%;
				.games-data-table-content-list {
					width: 100%;
					.games-data-table-content-list-show {
						width: 1.7rem;
						height: .8rem;
						line-height: .8rem;
						background: rgb(0,113,228);
					}
					.light-bg {
						background: rgb(213,234,255);
						color: rgba(75,75,75,.8);
					}
					.active-games {
						width: 2.8rem;
					}
					.active-games1 {
						width: 50%;
					}
					.active-games2 {
						width: 33.3%;
					}
					.active-games1-list {
						width: 100%;
					}
				}
			}
			.active-games1 {
				width: 50%;
				.games-data-table-content-list-title {
					width: 100%;
				}
			}
			.active-games2 {
				width: 33.3%;
				.games-data-table-content-list-title {
					width: 100%;
				}
			}
			.active-games3 {
				width: 66.6%;
				.games-data-table-content-list {
					.active-games2-list {
						width: 100%;
					}
				}
				
			}
			.list-no-data {
				width: 100%;
				.title-no-data {
					width: 100%;
					height: 1.2rem;
					line-height: 1.2rem;
                    border-radius: .06rem;
				}
			}
		}
	}
	.cash-overview {
		.cash-overview-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.cash-overview-title-more {
				color: rgba(66,66,66,.8);
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: .28rem;
				font-weight: bold;
				width: 1.5rem;
				.arrow-icon {
					height: .35rem;
					margin-left: .1rem;
				}
			}
			.cash-overview-switch {
				width: 1.5rem;
				height: .4rem;
				color: rgb(0,91,202);
				border: rgb(0,91,202) 1px solid;
				border-radius: .25rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-weight: normal;
				font-size: .22rem;
				overflow: hidden;
				.cash-overview-switch-list {
					height: .4rem;
					line-height: .4rem;
					width: 50%;
					text-align: center;
                    font-size: .2rem;
				}
				.cash-overview-chosing {
					background: rgb(0,91,202);
					color: #FFFFFF;
					border-radius: .25rem;
				}
			}
		}
		.cash-overview-content {
			border-top: rgb(220,220,220) 1px solid;
			border-bottom: rgb(220,220,220) 1px solid;
			margin-top: .2rem;
			padding: .2rem 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
            .van-skeleton {
                width: 100%;
            }
			.cash-overview-content-list {
				width: 20%;
				font-size: .2rem;
				border-right: rgb(220,220,220) 1px solid;
				.line1 {
					color: rgb(35,35,35);
					margin-bottom: .1rem;
				}
			}
			.cash-overview-content-list2 {
				width: 50%;
			}
			.cash-overview-content-list:last-child {
				border-right: none;
			}
			.member-overview-content-list {
				width: 25%;
			}
		}
        .member-overview-content {
            .van-skeleton {
                width: 25%;
            }
        }
	}
}
</style>
